<template>
	<view class="container">
		<view class="item" v-if="msgArr.length">
			<view class="item-one" v-for="item in msgArr" @click="getMsg(item)">
				<van-row>
					<van-col :span="3">
						<van-tag v-if="item.isRead === 0" size="medium" type="success">未读</van-tag>
						<van-tag v-else size="medium" >已读</van-tag>
					</van-col>
					<van-col :span="14">
						<text>{{item.title}}</text>
					</van-col>
					<van-col :span="7">
						<view style="padding-left: 20rpx;">
							<text style="font-size: 28rpx;">{{item.gmtCreate.split(" ")[0]}}</text>
						</view>
					</van-col>
				</van-row>
			</view>
		</view>
		<view v-else class="noData">
			<text>暂无消息~</text>
		</view>
		<van-dialog :show="show" title="内容" :message="message" confirm-button-color="#02BF88"  @confirm="show = false" />
		<van-toast id='van-toast'/>
	</view>
</template>

<script>
import { myMsg, setMsg } from '@/api/appraising.js'	
	export default {
		data() {
			return {
				msgArr: [],
				show: false,
				message: '',
				total: 0,
				pagination: {
					pageSize: 19,
					pageNum: 1
				}
			}
		},
		mounted() {
			this.getFeach()
		},
		onReachBottom() {
		      if ((this.pagination.pageSize * this.pagination.pageNum) >= this.total) {
		        return
		      }
		      this.pagination.pageNum++;
		      this.getFeach('more')
		 },
		methods:{
			getFeach(str) {
				myMsg({...this.pagination}).then(res => {
					var arr = res.data.rows
					this.total = res.data.total
					if (str == 'more') {
						if (arr.length > 0) {
							this.msgArr = this.msgArr.concat(arr)
						} else {
							this.$toast.fail('没有更多了')
						}
					} else {
						this.msgArr = arr
					}
				})
			},
			getMsg(item) {
				this.message = item.content
				this.show = true
				setMsg({id: item.id}).then(res => {
					item.isRead = 1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 24rpx 32rpx 0;
		background-color: #F8F8F8;
		height: 100vh;
		.item {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 16rpx 0;
			margin-top: 16rpx;
			background-color: #FFFFFF;
			color: #333;
			border-radius: 16rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			.item-one {
				height: 80rpx;
				border-bottom: 1px solid #EBEDF0;
				line-height: 80rpx;
				padding-bottom: 10rpx;
				text {
					display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>
